<template>
  <div class="container">
    <div class="box">
      <div class="btn">
        <el-button style="background-color: #e15738;color: #fff;" @click="addTemplate">新增模板</el-button>
      </div>
      <div class="transportTable">
        <el-table
          :data="transportList"
          highlight-current
          stripe
        >
          <!-- 放置列 -->
          <el-table-column prop="templateType" align="center" label="模板类型">
            <template v-slot="templateTypeRow">
              {{ templateTypeObj[templateTypeRow.row.templateType] }}
            </template>
          </el-table-column>
          <el-table-column prop="transportType" align="center" label="运送类型">
            <template v-slot="transportTypeRow">
              {{ transportTypeRow.row.transportType === 1 ? '普快' : '特快' }}
            </template>
          </el-table-column>
          <el-table-column prop="associatedCityList" align="center" label="关联城市">
            <template v-slot="associatedCityListRow">
              {{ associatedCityListObj[associatedCityListRow.row.associatedCityList] }}
            </template>
          </el-table-column>
          <el-table-column prop="firstWeight" align="center" label="首重" />
          <el-table-column prop="continuousWeight" align="center" label="续重" />
          <el-table-column prop="lightThrowingCoefficient" align="center" label="轻抛系数" />
          <el-table-column align="center" label="操作">
            <template v-slot="{ row }">
              <el-button type="text" size="small" @click="edit(row)">编辑</el-button>
              <el-button
                style="color: #e15738;"
                type="text"
                size="small"
                @click="del(row.id)"
              >删除</el-button>
            </template>

          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 弹层组件 -->
    <el-dialog
      :title="title"
      width="580px"
      :visible="showDialog"
      @close="closeDialog"
    >
      <el-form
        ref="form"
        class="Form"
        :model="addTemplateFormData"
        :rules="addTemplateFormRule"
      >
        <el-form-item prop="templateType" label-width="100px" label="模板类型">
          <el-select
            v-model="addTemplateFormData.templateType"
            placeholder="请选择模板类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in templateTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item prop="transportType" label-width="100px" label="运送类型">
          <el-select
            v-model="addTemplateFormData.transportType"
            placeholder="请选择运送类型"
            style="width: 100%"
          >
            <el-option
              v-for="item in transportTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label-width="100px" label="关联城市"> 全国 </el-form-item>
        <el-form-item prop="firstWeight" label-width="100px" label="首重价格">
          <el-input
            v-model="addTemplateFormData.firstWeight"
            autocomplete="off"
            placeholder="请输入首重价格"
          >
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item
          prop="continuousWeight"
          label-width="100px"
          label="续重价格"
        >
          <el-input
            v-model="addTemplateFormData.continuousWeight"
            autocomplete="off"
            placeholder="请输入续重价格"
          >
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item
          prop="lightThrowingCoefficient"
          label-width="100px"
          label="轻抛系数"
        >
          <el-input
            v-model="addTemplateFormData.lightThrowingCoefficient"
            autocomplete="off"
            placeholder="请输入轻抛系数"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" style="text-align: center">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

import { getTransportFeeList } from '@/api/transportFee'

export default {
  name: 'TransportFee',
  data() {
    return {
      // 运费模板列表
      transportList: [],
      // 模板类型
      templateTypeObj: {
        1: '同城寄',
        2: '省内寄',
        3: '经济区互寄',
        4: '跨省'
      },
      // 关联城市
      associatedCityListObj: {
        1: '全国',
        2: '京津冀',
        3: '江浙沪',
        4: '川渝',
        5: '黑吉辽'
      },
      // 控制弹层显示
      showDialog: false,
      // 表单数据
      addTemplateFormData: {
        templateType: '', // 模板类型
        transportType: '', // 运送类型
        associatedCityList: '1', // 关联城市
        firstWeight: '', // 首重价格
        continuousWeight: '', // 续重价格
        lightThrowingCoefficient: '' // 轻抛系数
      },
      // 校验规则
      addTemplateFormRule: {
        templateType: [
          { required: true, message: '模板类型不能为空', trigger: 'change' }
        ],
        transportType: [
          { required: true, message: '运送类型不能为空', trigger: 'change' }
        ],
        firstWeight: [
          { required: true, message: '首重价格不能为空', trigger: 'blur' }
        ],
        continuousWeight: [
          { required: true, message: '续重价格不能为空', trigger: 'blur' }
        ],
        lightThrowingCoefficient: [
          { required: true, message: '轻抛系数不能为空', trigger: 'blur' }
        ]
      },
      // Dialog标题
      title: '新增模板',
      // 模板类型下拉框数据
      templateTypeOptions: [
        {
          value: 1,
          label: '同城寄'
        },
        {
          value: 2,
          label: '省内寄'
        },
        {
          value: 3,
          label: '经济区互寄'
        },
        {
          value: 4,
          label: '跨省'
        }
      ],
      // 运送类型下拉框数据
      transportTypeOptions: [
        {
          value: 1,
          label: '普快'
        },
        {
          value: 2,
          label: '特快'
        }
      ]
    }
  },
  async created() {
    await this.getTransportFeeList()
  },
  methods: {
    // 获取运费模板列表
    async getTransportFeeList() {
      const result = await getTransportFeeList()
      // console.log(result)
      this.transportList = result.data.data
    },
    // 点击新增显示弹层
    addTemplate() {
      // 清空表单
      this.addTemplateFormData = {}
      this.title = '新增模板'
      this.showDialog = true
    },
    // 关闭弹层
    closeDialog() {
      this.showDialog = false
    },
    // 新增提交
    submitForm() {
      // 验证表单
      this.$refs.form.validate(async isOK => {
        if (!isOK) {
          // 提示
          this.$message.error('*号为必填项!')
        } else {
          this.$message.error('演示数据禁止修改！')
        }
      })
    },
    // 删除
    async del(id) {
      // 确认框
      await this.$confirm('你确定要删除吗？')
      // 发送删除请求
      // delTransportFeeTemplate(id)
      // this.$message.success('删除成功！')
      this.$message.error('演示数据禁止修改！')
    },
    // 编辑
    edit(row) {
      this.title = '编辑模板'
      this.showDialog = true
      // 渲染数据
      this.addTemplateFormData = row
    }
  }
}
</script>

<style scoped>
.container{
  background-color: #fff;
}
.box{
  padding: 30px;
}
.btn{
  background-color: #fff;
}
.transportTable{
  margin-top: 20px;
  border: 1px solid #ebeef5;
}
.Form {
  padding: 0 20px;
}
</style>
